<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>MeteoCal - Modifying #{eBean.eventFromId(eBean.newEvent.id).title}</title>
        <link href="../css/application.css" rel="stylesheet"></link>
        <link href="../css/datetimeevent.css" rel="stylesheet"></link>
        <link rel="icon" type="image/ico" href="../images/logoico.ico"/>
                <f:metadata>
            <f:viewParam name="id" value="#{eBean.newEvent.id}" />
        </f:metadata>
    </h:head>
    <h:body style="min-height: 800px;"><div id="body">

            <div id="head">
                <a href="personalpage.xhtml"><img src="../images/logo.png" /></a>
                
                <h:form><p:commandLink action="#{loginBean.logout()}">
    <p:graphicImage value="../images/logout.png" style="width: 70px; top:140px; left:88%;"/>
</p:commandLink></h:form>
            </div>

            <div id="title">
                <p1>MeteoCal</p1><br />
                <p2>Your website to plan your events.</p2>
            </div>
            
            <div id="bar">
                <a href="personalpage.xhtml" id="ppage" >#{uBean.actualLoggedUser.username} 's MeteoCal</a>
                <a href="calendar.xhtml" id="calendar">Calendar</a>
                <a href="search.xhtml" id="search">Search MeteoCal's friends</a>
            </div>

            <div id="e_creation">
                <center>
                    Modify your event! If you don't wanna change some fields,<br />
                    leave them empty!<br />
                    Check your privacy and place preferences<br />
                    every time you modify the event!
                    <br/>
                    <br/>
                    <br/>
                    <h:form id="event_form">
                                <p:growl id="msgs" showDetail="true" />
                                
                       <h:panelGrid columns="1"  id="matchGrid">

                            <h:outputLabel for="title" value="Title">
                                <p:inputText id="title" value="#{eBean.newTitle}" style="width:450px; float:right;">
                            <p:ajax update="titlemsg"/>
                                </p:inputText>
                                <p:message id="titlemsg" for="title" />
                                </h:outputLabel>

                             <br />
                            <h:outputLabel for="description" value="Description">
                                <p:inputTextarea id="description" value="#{eBean.newDescription}" style="min-width:450px; max-width: 450px;
                                                min-height: 200px; max-height: 200px; float:right; margin-left: 100px;" autoResize="false">
                            <p:ajax update="dscrpmsg"/>
                                </p:inputTextarea>
                                <p:message id="dscrpmsg" for="description" />
                            </h:outputLabel>

                            <br />
                            
                                                            <h:messages  style="font-weight: bold; color:red; padding:0px; margin:0;"/>
                            
                         <h:panelGrid columns="5"> 
                           <h:outputLabel for="date" value="Date" id="edate">
                               <p:calendar id="date" value="#{eBean.newDate}"  style="float:right;" pattern="dd/MM/yyyy"
                                           mindate="#{eBean.today}">
                                <p:ajax event="dateSelect" update="msgs" />  
                                </p:calendar>
                               <p:message id="datamsg" for="edate" />
                            </h:outputLabel>

                                <h:outputLabel style="width:30px"/>
                                
                             <h:outputLabel for="beginningHour" value="from" id="bh">
                                <p:calendar value="#{eBean.newBHour}" 
                                            pattern="HH:mm" timeOnly="true" style="float:right;">
                                    <p:ajax update="bhmsg"/>
                                    </p:calendar>
                                    <p:message id="bhmsg" for="bh" />
                                </h:outputLabel>
                                      
                                <h:outputLabel style="width:30px"/>
                                
                            <h:outputLabel for="endingHour" value="to" id="eh">
                                <p:calendar value="#{eBean.newEHour}" minHour=""
                                            minMinute="" pattern="HH:mm" timeOnly="true" style="float:right;">
                            <p:ajax update="ehmsg"/>
                                    </p:calendar>
                                    <p:message id="ehmsg" for="eh" />
                                </h:outputLabel>
                            </h:panelGrid>

                            <br />
                            <h:outputLabel for="city" value="City (city name, state ID)">
                                <p:inputText id="city" value="#{eBean.newCity}" style="width:350px;  margin-left: 80px; float:right;">
                                    <p:ajax update="citymsg"/>
                                </p:inputText>
                                <p:message id="citymsg" for="city" />
                            </h:outputLabel>

                            <br />          
                            <h:panelGrid columns="8">
                                <h:outputLabel for="outdoor" styleClass="form" value="Event place"><h:selectOneRadio value="#{eBean.newOutdoor}" style="float:right;" >
                                        <f:selectItem itemValue="#{true}" itemLabel="Outdoor"  />
                                        <f:selectItem itemValue="#{false}" itemLabel="Indoor" />
                                    </h:selectOneRadio>
                                </h:outputLabel>
                                <h:outputLabel/>
                                 <h:outputLabel/>
                                  <h:outputLabel/>
                                   <h:outputLabel/>
                                <h:outputLabel for="private1" styleClass="form" value="Event privacy">
                                    <h:selectOneRadio value="#{eBean.newPrivate}" style="float:right;" >
                                        <f:selectItem itemValue="#{false}" itemLabel="Public"  />
                                        <f:selectItem itemValue="#{true}" itemLabel="Private" />
                                    </h:selectOneRadio>
                                </h:outputLabel>
                            </h:panelGrid>


                        </h:panelGrid>
                        
                       <p:dialog modal="true"  header="Values" widgetVar="dlg" showEffect="fold" >
                            <p:panelGrid id="display" columns="2" columnClasses="label,value" >
            <h:outputText value="Date"/>
            <h:outputText value="#{eBean.newDate}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
            
            <h:outputText value="from" />
            <h:outputText value="#{eBean.newBHour}">
                <f:convertDateTime pattern="HH:mm a" />
            </h:outputText>
            
            <h:outputText value="to" />
            <h:outputText value="#{eBean.newEHour}">
                <f:convertDateTime pattern="HH:mm a" />
            </h:outputText>
            
            </p:panelGrid>
    </p:dialog>
                        
                        <br />
                        <p:panelGrid columns="2" class="table">
                        <p:commandButton value="Modify" action="#{eBean.modify()}"  
                                         style="border:0; box-shadow:0px 2px 5px #000000;" update="matchGrid
                                         ">
                        <f:param name="id" value="#{eBean.newEvent.id}" />
                        </p:commandButton>
                            <p:button value="Delete" outcome="delete_event"
                                       style="border:0; box-shadow:0px 2px 5px #000000;">
                                <f:param name="id" value="#{eBean.newEvent.id}" />
                            </p:button>
                        </p:panelGrid>
                    </h:form></center>
            </div>
            <h:body rendered="#{eBean.differenceOK(eBean.newEvent.id)}">
            <h:form rendered="#{eBean.eventFromId(eBean.newEvent.id).outdoor}">
            <h:form rendered="#{eBean.isForecastedBadWeather(eBean.eventFromId(eBean.newEvent.id).city, eBean.eventFromId(eBean.newEvent.id).date)}">
                <center>
                <div id="date_proposal">
                    <img src="../images/alert.png" width="80px" align="center"/>
                <div/>
                Bad weather expected on
                <div/>   #{eBean.stringDate(eBean.newEvent.id)}
                <div/>
                The closest dates with good weather are
                <div/>
                <div/>
                 <ui:repeat value="#{eBean.getCloserDates(eBean.eventFromId(eBean.newEvent.id).city, eBean.eventFromId(eBean.newEvent.id).date)}" var="date" >
                     <li>
                        #{date}
                        <div/>
                     </li>
                </ui:repeat>
                </div>
                         </center>
            </h:form>
            </h:form>
            </h:body>
                 
        </div>      
    </h:body>
</html>